<script setup>
import {ref} from "vue";

const usbDevices = ref([]);
const serialPorts = ref([]);

// 获取 USB 设备
const getUSBDevices = async () => {
	try {
		const devices = await navigator.usb.getDevices();
		console.log(devices)
		usbDevices.value = devices.map(device => ({
			vendorId: device.vendorId,
			productId: device.productId,
			manufacturerName: device.manufacturerName || "Unknown",
			productName: device.productName || "Unknown",
			deviceObject: device
		}));
	} catch (error) {
		console.error("Error getting USB devices:", error);
	}
};

// 获取串口设备
const getSerialPorts = async () => {
	try {
		const ports = await navigator.serial.getPorts();
		serialPorts.value = ports.map((port, index) => ({
			name: `Serial Port ${index + 1}`,
			usbVendorId: port.getInfo().usbVendorId || "Unknown",
			usbProductId: port.getInfo().usbProductId || "Unknown"
		}));
	} catch (error) {
		console.error("Error getting Serial ports:", error);
	}
};

// 请求访问 USB 设备（用户必须点击）
const requestUSBDevice = async () => {
	try {
		const device = await navigator.usb.requestDevice({filters: []});
		usbDevices.value.push({
			vendorId: device.vendorId,
			productId: device.productId,
			manufacturerName: device.manufacturerName || "Unknown",
			productName: device.productName || "Unknown"
		});
	} catch (error) {
		console.error("USB Device access denied:", error);
	}
};

// 请求访问串口设备（用户必须点击）
const requestSerialPort = async () => {
	try {
		const port = await navigator.serial.requestPort();
		const info = port.getInfo();
		serialPorts.value.push({
			name: `Serial Port ${serialPorts.value.length + 1}`,
			usbVendorId: info.usbVendorId || "Unknown",
			usbProductId: info.usbProductId || "Unknown"
		});
	} catch (error) {
		console.error("Serial Port access denied:", error);
	}
};
</script>

<template>
	<div class="p-6 bg-gray-100 min-h-screen">
		<h1 class="text-2xl font-bold mb-4">设备信息</h1>

		<!-- USB 设备 -->
		<div class="mb-6 p-4 bg-white shadow rounded-lg">
			<h2 class="text-xl font-semibold mb-2">USB 设备</h2>
			<button @click="getUSBDevices" class="px-4 py-2 bg-blue-500 text-white rounded-lg mr-2">获取 USB 设备
			</button>
			<button @click="requestUSBDevice" class="px-4 py-2 bg-green-500 text-white rounded-lg">请求 USB 访问
			</button>
			<ul v-if="usbDevices.length > 0" class="mt-4">
				<li v-for="(device, index) in usbDevices" :key="index" class="p-2 bg-gray-200 rounded my-2">
					<strong>厂商：</strong>{{ device.manufacturerName }}
					<strong>产品：</strong>{{ device.productName }}
					<strong>VID：</strong>{{ device.vendorId }}
					<strong>PID：</strong>{{ device.productId }}
					<strong>SN：</strong>{{device.deviceObject}}
				</li>
			</ul>
		</div>

		<!-- 串口设备 -->
		<div class="p-4 bg-white shadow rounded-lg">
			<h2 class="text-xl font-semibold mb-2">串口设备</h2>
			<button @click="getSerialPorts" class="px-4 py-2 bg-blue-500 text-white rounded-lg mr-2">获取串口设备
			</button>
			<button @click="requestSerialPort" class="px-4 py-2 bg-green-500 text-white rounded-lg">请求串口访问
			</button>
			<ul v-if="serialPorts.length > 0" class="mt-4">
				<li v-for="(port, index) in serialPorts" :key="index" class="p-2 bg-gray-200 rounded my-2">
					<strong>名称：</strong>{{ port.name }}
					<strong>VID：</strong>{{ port.usbVendorId }}
					<strong>PID：</strong>{{ port.usbProductId }}
				</li>
			</ul>
		</div>
	</div>
</template>
